<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="form" :rules="rules" ref="refForm" label-width="100px">
      <el-form-item label="有效期:" prop="time">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="素材类型:" prop="materialType">
        <el-select v-model="form.materialType">
          <el-option v-for="item in consts.EXTENSION_TYPE"
                     v-if="item.value !== -1"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="素材尺寸:" prop="materialSize">
        <el-select v-model="form.materialSize">
          <el-option v-for="item in consts.EXTENSION_SIZE"
                     v-if="item.value !== -1"
                     :key="item.value"
                     :label="item.title"
                     :value="item.title">
          </el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item label="显示端:" prop="showClient">-->
      <!--<el-select v-model="form.showClient" placeholder="请选择显示端">-->
      <!--<el-option v-for="item in consts.DEVICE_TYPE"-->
      <!--v-if="item.value !== -1"-->
      <!--:key="item.value"-->
      <!--:label="item.title"-->
      <!--:value="item.value">-->
      <!--</el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="显示端:" prop="showClient">-->
      <!--<checkbox-all :check-list="consts.DEVICE_TYPE" v-model="form.showClient"></checkbox-all>-->
      <!--</el-form-item>-->

      <el-form-item label="素材图:" prop="imageUrl">
        <img :src="form.imageUrl" v-if="form.imageUrl" class="image"/>
        <editor-image color="#1890ff" class="editor-upload-btn"
                      :limit="1"
                      @successCBK="imageSuccessCBK"></editor-image>
      </el-form-item>
      <el-button v-loading="loading" style="margin-left: 10px;" type="primary"
                 @click="doSave({
                 action: 'saveForm',
                 form: {
                 name: 'refForm',
                 scrollToError: true
                 }})">确定
      </el-button>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce';
import EditorImage from '@/components/Tinymce/components/editorImage';

import {
  marketingMaterialSaveApi as saveApi,
} from '@/services/api/marketing';

import { form, factory } from '@/build';
import CheckboxAll from '@/components/CheckboxAll/index';

export default {
  name: 'material-edit',
  components: {
    CheckboxAll,
    Tinymce,
    EditorImage,
  },

  mixins: [form],

  props: ['id', 'rowData'],
  data() {
    return {
      isIndeterminate: true,
      selectAll: false,
      form: {
        id: this.id,
        time: [moment(consts.ONLINE_DATE).format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        materialSize: undefined,
        materialType: undefined,
        imageUrl: undefined,
      },
      rules: {
        position: { required: true, message: '广告位置必须选择' },
        name: { required: true, message: '广告主题必须填写' },
        image: { required: true, message: '广告图为填' },
        time: { type: 'array', required: true, message: '发布时间必须填写' },
        // actionUrl: factory.getRule('uri'),/**/
      },
    };
  },
  methods: {
    imageSuccessCBK(arr) {
      arr.forEach((picInfo) => {
        this.form.imageUrl = picInfo.url;
      });
    },
  },
  mounted() {
    if (!_.isUndefined(this.rowData)) {
      const { showClientArray, startTime, endTime } = this.rowData;
      this.form = {
        ...this.rowData,
        time: [moment(startTime).format('YYYY-MM-DD HH:mm:ss'), moment(endTime).format('YYYY-MM-DD HH:mm:ss')],
        showClient: showClientArray,
      };
    }

    this.bindSave(saveApi, 'saveForm', 'form', {
      beforeSend: (data) => {
        console.log(data);
        const { time } = data;
        let startTime; let 
endTime;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        return {
          ...data,
          startTime,
          endTime,
        };
      },
      afterSuccess: () => {
        this.$emit('on-success');
        if (!this.form.id) {
          this.$router.push({
            path: '/marketing/marketing-material',
            replace: true,
            query: {
              tab: 'list',
            },
          });
        }
      },
    });
  },
};
</script>

<style lang="scss" scoped>
  .image {
    width: 100px;
    height: 100px;
  }
</style>
